<template>
  <div class="app-container">
    <!-- 添加或修改请假业务对话框 -->
    <el-form ref="form" :model="form" :rules="rules"  :inline="true">
      <el-form-item label="编号" prop="number">
        <el-input v-model="form.numberNum" disabled style="width: 280px;" />
      </el-form-item>
      <!--      <el-form-item label="采购类型" prop="number">-->
      <!--        <el-select v-model="form.purchaseType" placeholder="请选择" clearable :disabled='isdisabled'>-->
      <!--          <el-option-->
      <!--            v-for="item in dict.type.purchase_type"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <br />
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="isdisabled" />
      </el-form-item>
      <el-form-item label="物品名称" prop="objectName">
        <el-input v-model="form.objectName" placeholder="请输入物品名称" :disabled="isdisabled" />
      </el-form-item>
      <el-form-item label="规格型号" prop="specificationModel">
        <el-input v-model="form.specificationModel" placeholder="请输入规格型号" :disabled="isdisabled" />
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input
          v-model="form.number"
          placeholder="请输入数量"
          type="number"
          @input="form.number=form.number.replace(/\D|^0/g,'')"
          :disabled="isdisabled"
        />
      </el-form-item>
      <el-table ref="table" :data="applyList" style="width: 100%;margin-bottom:0.125rem" border>
        <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
        <el-table-column prop="supplier" label="供应商" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.supplier" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="contactInformation" label="联系人及联系方式" align="center" width="330px">
          <template slot-scope="scope">
            <el-input
              style="width: 300px"
              v-model="scope.row.contactInformation"
              :disabled="isdisabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="pileType" label="桩型" align="center" width="140">
          <template slot-scope="scope">
            <el-input v-model="scope.row.pileType" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="univalence" label="单价(元)" align="center" width="210px">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.univalence"
              :disabled="isdisabled"
              style="width: 180px"
              @input="scope.row.univalence=scope.row.univalence.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="总价(万元)" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.total" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="payType" label="付款方式" align="center" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.payType" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryDate" label="交货期" width="250" align="center">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.deliveryDate"
              type="datetime"
              :disabled="isdisabled"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间"
            ></el-date-picker>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item
        label="比价推荐说明"
        prop="recommendedInstructions"
        label-width="120px"
        style="width: 100%"
        class="bjsm"
      >
        <el-input
          :disabled="isdisabled"
          v-model="form.recommendedInstructions"
          type="textarea"
          placeholder="请输入内容"
          style="width: 100%"
        />
      </el-form-item>
      <br />
      <el-form-item label="上传附件" prop="attachment" v-if="!(isdisabled&&!form.contactFile)">
        <fileUpload v-model="form.attachment" :isDisabled="isdisabled" :limit="5" />
      </el-form-item>
      <br />
      <el-form-item label="上传上次流程" prop="lastWorkflow" label-width="130px">
        <image-upload v-model="form.lastWorkflow" :isDisabled="isdisabled" :limit="5" />
      </el-form-item>
    </el-form>
    <div
      v-show="parentTaskId===null&&confirmVisible"
      class="dialog-footer"
      style="text-align:center"
    >
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
    </div>
    <div
      v-show="parentTaskId==null&&!confirmVisible"
      class="dialog-footer"
      style="text-align:right"
    >
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify
      ref="verifyRef"
      :taskId="taskId"
      @submitCallback="submitCallback"
      :componentName="componentName"
      :taskVariables="taskVariables"
      :sendMessage="sendMessage"
    ></verify>
    <!-- 工作流结束 -->
  </div>
</template>

<script>
import {
  listPurchaseParity,
  getPurchaseParity,
  delPurchaseParity,
  addPurchaseParity,
  updatePurchaseParity
} from "@/api/oa/purchaseParity";
import verify from "@/components/Process/Verify";
import { parseTime } from "@/utils/ruoyi";
export default {
  name: "purchaseParityForm",
  dicts: ["bs_leave_type", "purchase_type"],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String, // 任务id
    confirmVisible: {
      type: Boolean,
      default: true
    }
  },
  components: {
    verify
  },
  data() {
    return {
      componentName: "比价申请",
      tableData1: [], //表单属性
      isdisabled: true,
      bcbtn: true,
      infoId: "",
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 请假业务表格数据
      leaveList: [],
      // 表单参数
      form: {},
      // 表单校验
      // 表单校验
      rules: {
        id: [{ required: true, message: "主键不能为空", trigger: "blur" }],
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        objectName: [
          { required: true, message: "物品名称不能为空", trigger: "blur" }
        ],
        specificationModel: [
          { required: true, message: "规格型号不能为空", trigger: "blur" }
        ],
        number: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        parityList: [{ required: true, message: "不能为空", trigger: "blur" }],
        recommendedInstructions: [
          { required: true, message: "比价推荐说明不能为空", trigger: "blur" }
        ]
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {},
      processKey: "oa_purchase_parity",
      applyList: []
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById();
        }
      }
    }
  },
  mounted() {},
  methods: {
    submitCallback() {
      this.$emit("closeForm");
    },
    async getById() {
      const { data } = await getPurchaseParity(this.businessKey);
      this.form = data;
      if (data.actBusinessStatus.createTime) {
        this.form.numberNum =
          this.processKey +
          "@" +
          parseTime(data.actBusinessStatus.createTime, "{y}{m}{d}{h}{i}{s}");
      }
      this.applyList = JSON.parse(data.parityList);
    },
    /** 提交按钮 */
    submitForm() {
      getPurchaseParity(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userId: 1
        };
        this.sendMessage = {
          title: "比价申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了比价申请"
        };
      });
      this.$refs.verifyRef.visible = true;
      this.$refs.verifyRef.reset();
    }
  }
};
</script>
<style scoped>
/* 设置滚动条宽度和高度 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /* 横向滚动条 */
  height: 8px; /* 纵向滚动条 必写 */
}
/* 设置滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #dde;
  border-radius: 3px;
}
::v-deep .bjsm .el-form-item__content {
  width: calc(100% - 130px) !important;
}
</style>
